<script setup lang="ts">
    import { onMounted } from "vue" //导入vue函数
    import * as echarts from "echarts" //导入echarts

    //组件加载完成
    onMounted(()=>{
        //初始化图表
        initCharts()
    })

    //初始化图表
    function initCharts(){
        //创建图表
        const myChart = echarts.init(document.getElementById("main_sale"))
        //设置图表参数
        myChart.setOption({
            color: ['#1493fa'],
            title: { text: '2022年月度销售额' },
            xAxis: {
                data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                name: '月份',
                axisLabel: {
                    interval: 0
                },
            },
            yAxis: {
                name: '单位（千万元）',
            },
            grid: {
                left: '5%',
                right: '10%',
                bottom: '5%',
                containLabel: true,
            },
            legend: {},
            series: [{
                data: [6, 7, 8.5, 8, 9, 10, 13, 12, 10, 16, 15, 14],
                type: 'line',
                name: '销售额',
                smooth: true,
                label: {
                    show: true,
                    position: 'top',
                }
            }]
        })
        // 图表自适应大小
        window.addEventListener("resize", ()=>{
            myChart.resize()
        })
    }
</script>

<template>
    <section class="sale">
        <!--显示图表的容器-->
        <div id="main_sale"></div>
    </section>
</template>

<style scoped>
    .sale{
        border:1px solid #E4E7ED;
        border-radius: 5px;
        width:50%;
        box-shadow: 0px 0px 5px 5px #E4E7ED;
        margin:20px;
        display:flex;
    }
    .sale #main_sale{
        width:100%;
        height:300px;
        margin:10px;
    }
</style>
